<template>
  <div class="deptTree">
    <el-input
      v-model="state.key"
      placeholder="请输入"
      @change="handleFilter"
      clearable
    >
      <template #prefix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
    </el-input>
    <el-tree
      ref="treeRef"
      class="filter-tree"
      node-key="id"
      :data="state.deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      default-expand-all
      @node-click="handleNodeClick"
      :filter-node-method="filterNode"
    />
  </div>
</template>

<script setup lang="ts">
import { ElTree } from "element-plus";
import { ref, reactive, defineEmits, onMounted } from "vue";
import { deptTreeSelect } from "/@ts/axios/urlApi/system/user";

const emit = defineEmits(["updateDept"]);
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const defaultProps = {
  children: "children",
  label: "label",
};
const treeRef = ref<InstanceType<typeof ElTree>>();
const handleFilter = () => {
  treeRef.value?.filter(state.key);
};
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};
const state = reactive<{
  deptOptions: Array<any>;
  key: string;
  title: string;
  userVisible: Boolean;
}>({
  key: "",
  title: "",
  deptOptions: [],
  userVisible: false,
});
const createFormData = () => ({
  nickName: "",
  deptId: "",
  phonenumber: "",
  email: "",
  userName: "",
  password: "",
  sex: "",
  status: "0",
  postIds: "",
  roleIds: "",
  remark: "",
});
const formUser = reactive(createFormData());
const getDeptTree = () => {
  deptTreeSelect().then((response: ResponseConfig) => {
    state.deptOptions = response.data;
  });
};
const handleNodeClick = (data: any) => {
  emit("updateDept", data);
};
//添加用户
const handleAddUser = () => {
  state.title = "添加用户";
  state.userVisible = true;
  Object.assign(formUser, createFormData());
};
onMounted(() => {
  getDeptTree();
});
</script>

<style scoped lang="scss">
.deptTree {
  width: 250px;
  height: 100%;
  overflow: hidden;
}
</style>
